<style scoped>
.img-face {
    max-width: 200px;
    max-height: 200px;
    padding: 10px;
    cursor: pointer;
}
</style>
<template>
    <div>
        <Card style="margin-bottom: 10px">
            <Form inline class="form-search">
                <FormItem>
                    <DatePicker style="width: 150px" type="date" format="yyyy年MM月dd日" placeholder="开始日期" :clearable="false"
                        v-model="sdate"></DatePicker>
                </FormItem>
                <FormItem>
                    <DatePicker style="width: 150px" type="date" format="yyyy年MM月dd日" placeholder="结束日期" :clearable="false"
                        v-model="edate"></DatePicker>
                </FormItem>
                <FormItem> </FormItem>
                <FormItem>
                    <Input v-model="keyword" placeholder="人员名称/药品" style="width: 200px" />
                </FormItem>

                <FormItem>
                    <Button type="primary" @click="
                        page = 1;
                    SearchSaleOrder();
                    " icon="md-search">查询</Button>
                </FormItem>

            </Form>
        </Card>
        <Table ref="table" style="margin-bottom: 10px" border :loading="loadingTable" :columns="tableTitle"
            :data="tableData" :height="tableHeight"></Table>
        <Page :total="total" :current="page" :page-size="size" :page-size-opts="[10, 50, 100]" @on-change="(s) => {
            page = s;
            SearchSaleOrder();
        }
            " @on-page-size-change="(p) => {
        size = p;
        page = 1;
        SearchSaleOrder();
    }
        " show-total show-sizer />

    </div>
</template>

<script>
import {
    SearchSaleOrder,
    GetSaleOrder

} from '@/api/saleorder'
export default {
    name: 'saleorderchose',
    data() {
        return {
            Extras: {},
            total: 0,
            page: 1,
            size: 50,
            tableHeight: 450,
            sdate: '',
            edate: '',
            keyword: '',
            ruleValidate: {},
            loading: false,
            loadingTable: false,
            tempDataId: 0,
            isPrint: 0,
            modalData: false,
            tableTitle: [
                {
                    type: 'index',
                    key: 'index',
                    title: '序号',
                    align: 'center',
                    width: 100,
                    render: (h, params) => {
                        return h('span', params.index + (this.page - 1) * this.size + 1)
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    width: 100,
                    render: (h, params) => {
                        return h('Button', {
                            props: {
                                type: 'success',
                                size: 'small'
                            },
                            style: {
                                marginRight: '5px'
                            },
                            on: {
                                click: () => {
                                    this.GetSaleOrder(params.row.Id)
                                }
                            }
                        }, '选择')
                    }
                },
                {
                    key: 'SaleOrderDate',
                    title: '单据日期',
                    width: 120,
                    align: 'center',
                    render: (h, params) => {
                        return h('span', {}, this.dayjs(params.row.SaleOrderDate).format('YYYY-MM-DD'))
                    }
                },
                {
                    key: 'OrderNo',
                    title: '单据编号',
                    width: 150,
                    align: 'center'
                },
                {
                    key: 'CustomerName',
                    title: '客户名称',
                    width: 100,
                    align: 'center'
                },

                {
                    key: 'OrderDesc',
                    title: '商品',
                    width: 200,
                    align: 'center'
                },
                {
                    key: 'Amount',
                    title: '合计金额(元)',
                    width: 120,
                    align: 'center'
                },
                {
                    key: 'FreightFee',
                    title: '运费(元)',
                    width: 120,
                    align: 'center'
                },
                {
                    key: 'GiveupFee',
                    title: '抹零金额(元)',
                    width: 120,
                    align: 'center'
                },
                {
                    key: 'AllFee',
                    title: '本次金额(元)',
                    width: 120,
                    align: 'center'
                },
                {
                    key: 'PayFee',
                    title: '付款金额(元)',
                    width: 120,
                    align: 'center'
                },
                {
                    key: 'PrintNum',
                    title: '打印次数',
                    width: 100,
                    align: 'center'
                },
                {
                    key: 'Remark',
                    title: '备注',
                    width: 200,
                    align: 'center'
                }
            ],
            tableData: [],
            allRoles: [],
            tempRoleIds: [],
            checkAll: false,
            tempDetail: [],
            modalChose: false,
            configData: {},
            dataProduct: []
        }
    },
    computed: {},
    methods: {

        SearchSaleOrder() {
            let vm = this
            vm.loadingTable = true
            if (typeof vm.sdate === 'object') {
                vm.sdate = vm.dayjs(vm.sdate).format('YYYY年MM月DD日')
            }
            if (typeof vm.edate === 'object') {
                vm.edate = vm.dayjs(vm.edate).format('YYYY年MM月DD日')
            }
            var reqData = {
                page: vm.page,
                size: vm.size,
                sdate: vm.sdate,
                edate: vm.edate,
                keyword: vm.keyword
            }
            SearchSaleOrder(reqData).then((res) => {
                vm.loadingTable = false
                var data = res.data
                if (data.StatusCode == 200) {
                    vm.tableData = data.Data.Items
                    vm.total = data.Data.TotalCount
                    vm.Extras = data.Extras
                } else {
                    vm.$Notice.error({
                        title: data.Errors
                    })
                }
            })
        },
        GetSaleOrder(id) {
            GetSaleOrder(id).then((res) => {
                const data = res.data
                if (data.StatusCode == 200) {
                    this.$emit('on-success', data.Data)
                } else {
                    this.$Message.error({ title: '提示', content: data.Errors })
                }
            })
        }

    },
    mounted() {
        this.sdate = this.dayjs().subtract(1, 'month').date(1).format('YYYY年MM月DD日')
        this.edate = this.dayjs().format('YYYY年MM月DD日')
        this.SearchSaleOrder()
    }

}
</script>

<style></style>
